<template>
  <div>
    <el-card v-loading="loading">
      <el-table
          :data="users"
          style="width: 100%"
          stripe
          border>
        <el-table-column
            type="index"
            label="#"
        >
        </el-table-column>
        <el-table-column
            prop="userId"
            label="用户账号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="username"
            label="用户名">
        </el-table-column>
        <el-table-column
            prop="email"
            label="用户邮箱">
        </el-table-column>
        <el-table-column
            label="角色">
          <template slot-scope="scope">
            <div style="display: inline-block;float: left">
              {{scope.row.role}}
            </div>
            <div style="display: inline-block;float: right">
              <el-button size="mini" type="success" plain round @click="changeRoleDialog(scope.row)">
                更换角色
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
        title="提示"
        :visible.sync="roleDialogVisible"
        width="30%"
        :before-close="handleRoleClose">

      <el-radio-group v-model="chosenRole">
        <div :key="index" v-for="(item,index) in roleList">
          <el-radio  :label="index">{{item.name}}</el-radio>
        </div>
      </el-radio-group>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleRoleClose">取 消</el-button>
        <el-button type="primary" @click="changeRole">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "UserManagement",
  data(){
    return{
      loading:false,
      users:[
      ],
      roleList:[
        {name:"普通用户",roleId:1},
        {name:"VIP用户"},
        {name:"商家"}
      ],
      roleDialogVisible:false,
      chosenRole:0,
      chosen_user_id:"",
      chosen_user_role:"",
      userNum:0,
      page:1,
      size:50
    }
  },
  async created() {
    this.loading=true;
    const{data:res} = await this.$http.post('http://120.46.132.13:8081/api/role/geUserNum')
    console.log(res)
    if(res.code!==200&&res.code!==0){
      this.$notify.error("获取用户数量失败")
    }else{
      this.userNum = res.data
    }
    console.log("用户数量",this.userNum)
    this.page=1;
    this.size=200;
    this.getUserList();
    this.getRoleList();
  },
  methods:{
    async getUserList(){
      this.loading=true;
      let form = {
        page:this.page,
        size:this.size
      }
      const{data:res} = await this.$http.post('http://120.46.132.13:8081/api/role/getRoleList',form)
      if(res.code===200||res.code===0){
        this.users = res.data;
        let cleanUsers = []
        for(let i=0; i<this.users.length; ++i){
          if(this.users[i].role!=="管理员"){
            cleanUsers.push(this.users[i]);
          }
        }
        this.users = cleanUsers
      }else{
        this.$notify.error("获取用户列表失败")
      }
      this.loading=false;
    },
    async getRoleList(){
      this.loading=true;
      let form = {
        token:window.sessionStorage.getItem("token")
      }
      const {data:res} = await this.$http.post('http://120.46.132.13:8081/api/role/getAllRole',form);
      if(res.code===200||res.code===0){
        this.roleList = res.data.rights;
        let flag = 0;
        for(let i=0; i<this.roleList.length; ++i){
          if(this.roleList[i].roleId===0){
            flag = i;
            break;
          }
        }
        this.roleList.splice(flag,1)
        console.log(this.roleList);
      }else{
        this.$notify.error("获取角色列表失败")
      }
      this.loading=false;
    },
    changeRoleDialog(role){
      this.roleDialogVisible=true;
      this.chosen_user_id=role.userId;
      this.chosen_user_role=role.role;
    },
    async changeRole(){
      console.log(this.chosen_user_id,this.chosen_user_role,this.roleList[this.chosenRole].name)
      //删
      let form1 = {
        userId:this.chosen_user_id,
        roleName:this.chosen_user_role,
        roleId:0
      }
      //增
      let form2 = {
        userId:this.chosen_user_id,
        roleName:this.roleList[this.chosenRole].name,
        roleId:0
      }

      for(let i=0; i<this.roleList.length; ++i){
        if(this.roleList[i].name===form1.roleName){
          form1.roleId = this.roleList[i].roleId;
        }
        if(this.roleList[i].name===form2.roleName){
          form2.roleId = this.roleList[i].roleId;
        }
      }

      const{data:res} = await this.$http.post('http://120.46.132.13:8081/api/role/deleteUserRole',form1)
      if(res.code!==0&&res.code!==200){
        this.$notify.error("操作失败")
      }
      const{data:res2} = await this.$http.post('http://120.46.132.13:8081/api/role/addUserRole',form2)
      if(res2.code!==0&&res2.code!==200){
        this.$notify.error("操作失败")
      }
      console.log(form1,form2)

      this.$notify.success("修改角色成功")
      this.getUserList();
      this.handleRoleClose();
    },
    handleRoleClose(){
      this.roleDialogVisible = false;
      this.chosenRole=0;
    }
  }
}
</script>

<style scoped>

</style>
